<template>
  <div class="mains">
    <div class="mask" v-if="infoShow"></div>
    <div class="infos" v-if="infoShow">
      <div class="allTops">
        <div class="infoTop">
          <div class="text">寻源单详情</div>
          <div class="wrong" @click="close">
            <a-icon type="close" />
          </div>
        </div>
        <div class="topMiddle">
          <div class="left">
            <div class="buttomImg">
              <img src="../../../assets/image/buyer/total.png" />
            </div>
            <div class="number">
              <span class="Ch">寻源单号：</span>
              <span class="normal">4324324324324234（配件寻源）</span>
            </div>
            <div class="button">已过期</div>
            <div class="surplus">
              <div class="time">剩余时间:</div>
              <div class="surplusButton">
                <span>12</span>
                :
                <span>30</span>
              </div>
              <div class="surplusPrice">延长询价</div>
            </div>
          </div>
          <div class="idon">
            <a-icon type="more" />
          </div>
        </div>
      </div>
      <div class="open" v-if="openShow">
        <div class="three">
          <div class="eveMessage">
            <div class="imgMessage">
              <img src="../../../assets/image/buyer/menu.png" />
            </div>
            <div class="textMessage">
              <span class="CHi">发布时间 ：</span>
              <span class="NUm">2020/11/22 12:00:99</span>
            </div>
          </div>
          <div class="eveMessage">
            <div class="imgMessage">
              <img src="../../../assets/image/buyer/menu.png" />
            </div>
            <div class="textMessage">
              <span class="CHi">交货要求 :</span>
              <span class="NUm">常规物流</span>
            </div>
          </div>
          <div class="eveMessage">
            <div class="imgMessage">
              <img src="../../../assets/image/buyer/menu.png" />
            </div>
            <div class="textMessage">
              <span class="CHi">报价要求 :</span>
              <span class="NUm">含税</span>
            </div>
          </div>
          <div class="eveMessage">
            <div class="imgMessage">
              <img src="../../../assets/image/buyer/menu.png" />
            </div>
            <div class="textMessage">
              <span class="CHi">截止时间 :</span>
              <span class="NUm">2020/11/22 12:00:99</span>
            </div>
          </div>
          <div class="eveMessage">
            <div class="imgMessage">
              <img src="../../../assets/image/buyer/menu.png" />
            </div>
            <div class="textMessage">
              <span class="CHi">发单人 :</span>
              <span class="NUm">张三</span>
            </div>
          </div>
          <div class="eveMessage">
            <div class="imgMessage">
              <img src="../../../assets/image/buyer/menu.png" />
            </div>
            <div class="textMessage">
              <span class="CHi">交易方式 :</span>
              <span class="NUm">账期支付</span>
            </div>
          </div>
          <div class="eveMessage">
            <div class="imgMessage">
              <img src="../../../assets/image/buyer/menu.png" />
            </div>
            <div class="textMessage">
              <span class="CHi">询价发誓 :</span>
              <span class="NUm">公开询价和指定供应商</span>
            </div>
          </div>
          <div class="eveMessage">
            <div class="imgMessage">
              <img src="../../../assets/image/buyer/menu.png" />
            </div>
            <div class="textMessage">
              <span class="CHi">联系方式 :</span>
              <span class="NUm">13453245765</span>
            </div>
          </div>
          <div class="eveMessage"></div>
        </div>
        <div class="simple">
          <div class="eveMessage">
            <div class="imgMessage">
              <img src="../../../assets/image/buyer/menu.png" />
            </div>
            <div class="textMessage">
              <span class="CHi">收票人 :</span>
              <span class="NUm"
                >上海市浦东新区三林镇杨思路1232上海思达奥迪4S店</span
              >
            </div>
          </div>
          <div class="eveMessage">
            <div class="imgMessage">
              <img src="../../../assets/image/buyer/menu.png" />
            </div>
            <div class="textMessage">
              <span class="CHi">备注 :</span>
              <span class="NUm">2432432432备注</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bottoms">
        <div class="TopTitle">
          <div class="title">
            <span>报价信息</span>
          </div>
          <div class="titleImg" v-if="!openShow" @click="openShows">
            <img src="../../../assets/image/buyer/top.png" />
          </div>
          <div class="titleImg" v-if="openShow" @click="closeShows">
            <img src="../../../assets/image/buyer/bottom.png" />
          </div>
          <div class="car">
            <div class="carInfo">
              <div class="everyCar">
                <div class="carTop">适用汽车品牌</div>
                <div class="carBottom">宝马</div>
              </div>
              <div class="everyCar">
                <div class="carTop">寻源商品数</div>
                <div class="carBottom">14</div>
              </div>
              <div class="everyCar">
                <div class="carTop">已报价供应商</div>
                <div class="carBottom">10</div>
              </div>
              <div class="everyCar">
                <div class="carTop">新供应商</div>
                <div class="carBottom">5</div>
              </div>
            </div>
          </div>
        </div>
        <div class="CheckTabs">
          <div class="tabsInfo">
            <a-tabs default-active-key="1" @change="callback">
                <a-tab-pane key="1" tab="订单">
                <orderInfo></orderInfo>
              </a-tab-pane>
              <a-tab-pane key="2" tab="中标">
                <bid></bid>
              </a-tab-pane>
              <a-tab-pane key="3" tab="未中标">
                <neverBid></neverBid>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </div>
    </div>
    <div class="search">
      <div class="allTop">
        <div class="message">
          <div class="text">搜索信息:</div>
          <div>
            <a-input
              ref="userNameInput"
              v-model="input"
              placeholder="原厂零件号/商品名称/平台编码/供应商名称,支持模糊搜索"
            >
              <a-icon slot="prefix" type="search" />
            </a-input>
          </div>
        </div>
        <div class="type">
          <div class="text">寻源单类型:</div>
          <div class="tabs">
            <a-radio-group v-model="size" style="margin-bottom: 16px">
              <a-radio-button value="alls"> 全部 </a-radio-button>
              <a-radio-button value="pj"> 配件 </a-radio-button>
              <a-radio-button value="lt"> 轮胎 </a-radio-button>
              <a-radio-button value="yp"> 用品 </a-radio-button>
              <a-radio-button value="fw"> 服务 </a-radio-button>
            </a-radio-group>
          </div>
        </div>
        <div class="searchButton">
          <div class="sure"><a-button>重置</a-button></div>
          <div class="sure"><a-button type="primary"> 查询 </a-button></div>
        </div>
      </div>
      <div class="allTop">
        <div class="StartTime">
          <div class="text">发布时间：</div>
          <div>
            <a-range-picker @change="onChange">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </div>
        </div>
        <div class="StartTime">
          <div class="text">截至时间：</div>
          <div>
            <a-range-picker @change="onChange">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <a-row type="flex" class="table-title">
        <a-col
          :span="5"
          class="textOverflow"
          style="text-align: left; padding-left: 50px"
        >
          寻源商品
        </a-col>
        <a-col :span="2" class="textOverflow"> 采购数量 </a-col>
        <a-col :span="3" class="textOverflow"> 已收到报价数 </a-col>
        <a-col :span="3" class="textOverflow"> 指定供应商报价数 </a-col>
        <a-col :span="2" class="textOverflow"> 已下订单 </a-col>
        <a-col :span="4" class="textOverflow"> 可下单/已下单商品数 </a-col>
        <a-col :span="3" class="textOverflow"> 发布 </a-col>
        <a-col :span="2" class="textOverflow"> 操作 </a-col>
      </a-row>
    </div>
   <div class="table">
      <div class="every">
        <div class="top">
          <div class="times">
            <img src="../../../assets/image/buyer/times.png" />
          </div>
          <div class="left">
            报价截至
            <span class='days'> &nbsp;{{ 1 }}&nbsp;</span>
            天
            <span class='days'>&nbsp;{{ 21 }} &nbsp;</span>
            :
            <span class='days'>&nbsp;{{ 10 }}&nbsp;</span>
          </div>
          <div class="right">
            <div class="number">
              <span class="Ch">寻源单号：</span>
              <span class="normal">4324324324324234（轮胎寻源）</span>
              <span class="FH">|</span>
            </div>
            <div class="number">
              <span class="Ch">交货要求：</span>
              <span class="normal">常规</span>
              <span class="FH">|</span>
            </div>
            <div class="number">
              <span class="Ch">询价要求：</span>
              <span class="normal">公开/指定</span>
              <span class="FH">|</span>
            </div>
            <div class="number">
              <span class="Ch">核价人：</span>
              <span class="normal">李四</span>
            </div>
          </div>

        </div>
        <div class="everyMain">
          <div class="allUl">
            <div class="ul">
              <div style="width: 2%; display: flex; align-items: center">1</div>
              <div style="width: 25%; display: flex; align-items: center">
                燃油滤清器
                <div class="send">
                  432432432
                  <div class="arrow"></div>
                </div>
              </div>
              <div
                style="
                  width: 15%;
                  font-weight: bold;
                  display: flex;
                  align-items: center;
                "
              >
                X4
              </div>
              <div
                style="
                  width: 15%;
                  font-weight: bold;
                  display: flex;
                  align-items: center;
                "
              >
                5
              </div>
              <div style="width: 20%; display: flex; align-items: center">
                6/8
                <span class="zhiding">指定</span>
              </div>
              <div style="width: 15%; display: flex; align-items: center">9</div>
              <div style="width: 8%; display: flex; align-items: center">9</div>
            </div>
       
          </div>

          <div class="other">
            <div class="otherLeft">
              <div>张三</div>
              <div>2021/9/7 12:00:00</div>
              <div>
                <span class="button">轮胎寻源</span>
              </div>
            </div>
            <div class="otherRight">
              <div class="info" @click="goInfo">
                <a-icon type="file" />
                查看详情
              </div>
              <div class="more">
                <a-button>再寻一单</a-button>
              </div>
            </div>
          </div>
        </div>
      </div>  
     <div class="every">
        <div class="top">
          <div class="times">
            <img src="../../../assets/image/buyer/times.png" />
          </div>
          <div class="left">
            报价截至
            <span> &nbsp;{{ 1 }}&nbsp;</span>
            天
            <span>&nbsp;{{ 21 }} &nbsp;</span>
            :
            <span>&nbsp;{{ 10 }}&nbsp;</span>
          </div>
          <div class="right">
            <div class="number">
              <span class="Ch">寻源单号：</span>
              <span class="normal">4324324324324234（轮胎寻源）</span>
              <span class="FH">|</span>
            </div>
            <div class="number">
              <span class="Ch">交货要求：</span>
              <span class="normal">常规</span>
              <span class="FH">|</span>
            </div>
            <div class="number">
              <span class="Ch">询价要求：</span>
              <span class="normal">公开/指定</span>
              <span class="FH">|</span>
            </div>
            <div class="number">
              <span class="Ch">核价人：</span>
              <span class="normal">李四</span>
            </div>
          </div>

        </div>
        <div class="everyMain">
          <div class="allUl">
            <div class="ul">
              <div style="width: 2%; display: flex; align-items: center">1</div>
              <div style="width: 25%; display: flex; align-items: center">
                燃油滤清器
                <div class="send">
                  432432432
                  <div class="arrow"></div>
                </div>
              </div>
              <div
                style="
                  width: 15%;
                  font-weight: bold;
                  display: flex;
                  align-items: center;
                "
              >
                X4
              </div>
              <div
                style="
                  width: 15%;
                  font-weight: bold;
                  display: flex;
                  align-items: center;
                "
              >
                5
              </div>
              <div style="width: 20%; display: flex; align-items: center">
                6/8
                <span class="zhiding">指定</span>
              </div>
              <div style="width: 15%; display: flex; align-items: center">9</div>
              <div style="width: 8%; display: flex; align-items: center">9</div>
            </div>
       
          </div>

          <div class="other">
            <div class="otherLeft">
              <div>张三</div>
              <div>2021/9/7 12:00:00</div>
              <div>
                <span class="button">轮胎寻源</span>
              </div>
            </div>
            <div class="otherRight">
              <div class="info" @click="goInfo">
                <a-icon type="file" />
                查看详情
              </div>
              <div class="more">
                <a-button>再寻一单</a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
        </div>
          <div class="footer">
           
              <div class="bottom-pagination">
        <pagination 
          style="float:right;margin:20px;" 
          @pageChange="pageChange"
          :total="total"
          :current="current">
        </pagination>
        <div class="allBottomleft">
            <div class="buttomImg">
            <img src="../../../assets/image/buyer/orders.png">
        </div>
        <div class="paginationBefore">已过期商品数合计（个）： <span class="totals">{{total}}</span> </div>
        </div>
      </div>
         </div>
      </div>
</template>

<script>
import Vue from "vue";
import Pagination from "@/components/common/pagination";
import { Input } from "ant-design-vue";
Vue.use(Input);
import orderInfo from "./overdueinfos/orderInfo";
import bid from "./overdueinfos/bid";
import neverBid from "./overdueinfos/neverBid";
export default {
  components: { Pagination, orderInfo, bid ,neverBid},
  data() {
    return {
      input: "",
      size: "",
      total: 0, //总条数
      current: 1, //当前页
      infoShow: false,
      openShow: false,
    };
  },
  methods: {
    callback(key) {
      console.log(key);
    },
    openShows() {
      this.openShow = true;
    },
    closeShows() {
      this.openShow = false;
    },
    pageChange() {},
    onChange() {},
    goInfo() {
      this.infoShow = true;
    },
    close() {
      this.infoShow = false;
    },
  },
};
</script>

<style lang='less' scoped >
.mains {
    width: 100%;
   height: 100%;
  overflow-y: scroll;
    overflow-x: hidden;
}
.mask {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99;
}
.infos {
  z-index: 100;
  width: 92%;
  min-height: 400px;
  max-height: 99%;
  overflow-y: auto;
  overflow-x: scroll;
  background-color: rgb(248, 248, 248);
  position: absolute;
  left: 2%;
  top: 1%;
  .allTops {
    width: 100%;
    height: 127px;
    background-color: white;
  }
  .infoTop {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    // background-color: red;
    justify-content: space-between;
    border-bottom: 1px solid rgb(248, 248, 248);
    .text {
      font-family: "PingFangSC";
      font-size: 16px;
      line-height: 54px;
      font-weight: bold;
      margin-left: 24px;
    }
    .wrong {
      margin-right: 24px;
      cursor: pointer;
    }
  }
  .topMiddle {
    width: 100%;
    height: 72px;
    // background-color: red;
    display: flex;
    align-items: center;
    .left {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      .number {
        height: 50px;
        line-height: 50px;
        margin-left: 8px;
      }
      .button {
        width: 60px;
        height: 24px;
        background-color: rgb(255, 247, 235);
        color: rgb(255, 144, 3);
        text-align: center;
        font-size: 12px;
        line-height: 24px;
        margin-left: 8px;
      }
      .surplus {
        margin-left: 32px;
        display: flex;
        align-items: center;
        .time {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: rgb(184, 187, 194);
        }
        .surplusButton {
          margin-left: 8px;
          width: 66px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          background-color: rgb(252, 239, 239);
          border: 1px solid rgb(235, 157, 157);
          color: #d73737;
          font-size: 16px;
          font-weight: bold;
          border-radius: 2px;
        }
        .surplusPrice {
          margin-left: 16px;
          width: 72px;
          height: 24px;
          background-color: rgb(255, 144, 3);
          font-size: 12px;
          line-height: 24px;
          text-align: center;
          color: white;
          border-radius: 2px;
        }
      }
    }
    .idon {
      margin-right: 24px;
      cursor: pointer;
    }
  }
  .open {
    width: 100%;
    height: 210px;
    background-color: #f9fbff;
    .eveMessage {
      width: 33.3%;
      // background-color: red;
      display: flex;
      justify-content: space-around;
      margin-top: 16px;
      .imgMessage {
        width: 10px;
        height: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .textMessage {
        font-size: 12px;
        width: 90%;
        .CHi {
          color: rgb(174, 180, 189);
        }
        .NUm {
          color: #202d40;
          margin-left: 12px;
        }
      }
    }
    .three {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .simple {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .eveMessage {
        width: 50%;
      }
    }
  }
  .bottoms {
    margin-top: 8px;
    width: 100%;
    min-height: 200px;
    background-color: white;
    .TopTitle {
      width: 100%;
      height: 62px;
      position: relative;
      .title {
        font-size: 14px;
        font-weight: bold;
        line-height: 62px;
        background-color: white;
        margin-left: 24px;
      }
      .titleImg {
        width: 15px;
        height: 15px;
        background: rgb(248, 248, 248);
        position: absolute;
        top: 0px;
        left: 50%;
        cursor: pointer;
        img {
          width: 95%;
          height: 95%;
        }
      }
      .car {
        width: 100%;
        height: 82px;
        // background-color: pink;
        border: 1px solid rgb(246, 247, 249);
        .carInfo {
          display: flex;
          // align-items: center;
          width: 100%;
          height: 60px;
          .everyCar {
            margin-left: 32px;
            margin-top: 10px;
            width: 25%;
            height: 100%;
            // background-color: pink;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-right: 1px solid rgb(246, 247, 249);
            .carTop {
              height: 25px;
              line-height: 25px;
              color: rgb(187, 191, 197);
              font-size: 12px;
            }
            .carBottom {
              font-size: 17px;
              font-weight: bold;
              height: 25px;
              line-height: 25px;
            }
          }
        }
      }
    }
    .CheckTabs {
      margin-top: 100px;
      margin-left: 24px;
    }
  }
}
.search {
  width: 100%;
  height: 120px;
  background-color: white;
  .allTop {
    width: 100%;
    margin-left: 10px;
    display: flex;
  overflow: hidden;
    .message {
      margin-left: 16px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .text {
        font-weight: bold;
      }
      .ant-input-affix-wrapper {
        margin-left: 10px;
        width: 400px;
      }
    }
    .type {
      // width: 29%;
      margin-left: 16px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .text {
        font-weight: bold;
      }
      .tabs {
        margin-left: 10px;
        margin-top: 10px;
      }
    }
    .searchButton {
      width: 140px;
      justify-content: space-between;
      display: flex;
      margin-top: 15px;
      margin-left: 100px;
      .sure {
        width: 65px;
        height: 50px;
      }
    }
  }
  .StartTime {
    margin-left: 16px;
    width: 26%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .text {
      font-weight: bold;
    }
    .ant-calendar-picker {
      width: 240px;
    }
  }
}
.middle {
  width: 100%;
  margin: 10px 100px 0 0;
  .table-title {
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    font-weight: 500;
    background-color: white !important;
    .textOverflow {
      font-weight: bold;
    }
  }
}
.table {
  width: 100%;
  margin-top: 10px;
  padding-bottom: 20px;
  background-color: white;
  .every {
    margin-top: 10px;
    // padding-bottom: 20px;
    .top {
      width: 100%;
      height: 54px;
      display: flex;
      align-items: center;
      .times {
        margin-left: 20px;
      }
      .left {
        font-size: 16px;
        font-family: "黑体";
        font-weight: bolder;
        line-height: 60px;
        margin-left: 5px;
        width: 30%;
        .days{
          height: 20px;
          width: 25px;
          text-align: center;
          line-height: 20px;
          font-size: 15px;
          background-color: rgb(233, 239, 252);
          color: rgb(79, 122, 253);
        }
      }
      .right {
        width: 70%;
        display: flex;
        justify-content: space-around;
        line-height: 60px;
        .number {
          .Ch {
            color: rgb(162, 167, 175);
          }
          .normal {
            font-weight: bold;
          }
          .FH {
            margin-left: 10px;
          }
        }
      }
      .numbers {
        margin-left: 30px;
      }
      .numberss {
        margin-left: 30px;
        border-right: 3px solid rgb(237, 239, 243);
      }
    }
  }
}
.everyMain {
  display: flex;
  width: 98%;
  margin: auto;
  background-color: rgb(248, 248, 248);
  // background-color: pink;
  .allUl {
    width: 78%;
    margin-left: 5px;
    // background-color: pink;
    display: flex;
    flex-direction: column;
      .ul {
    width: 100%;
    height: 90px;
    display: flex;
    // background-color: red;
    border-bottom: 2px solid rgb(242, 243, 246);
    border-right: 2px solid rgb(242, 243, 246);
         .zhiding {
            display: block;
            width: 40px;
            margin-left: 5px;
            height: 20px;
            line-height: 20px;
            font-size: 10px;
            text-align: center;
            border: 1px solid rgb(79, 122, 253);
            color: rgb(79, 122, 253);
          }

          .send {
            position: relative;
            width: 110px;
            height: 24px;
            line-height: 25px;
            background: white;
            border-radius: 5px; /* 圆角 */
            margin-left: 10px;
          }
          .send .arrow {
            position: absolute;
            top: 5px;
            left: -16px; /* 圆角的位置需要细心调试哦 */
            width: 0;
            height: 0;
            font-size: 0;
            border: solid 8px;
            border-color: transparent white transparent transparent;
          }
      }
  
    }
        .other {
        width: 25%;
        height: 100%;
        display: flex;
        align-self: center;
        .otherLeft {
          width: 60%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          // justify-content: center; /* 水平居中 */
          align-items: center;
          margin: auto;
          border-right: 2px solid rgb(242, 243, 246);
          div {
            width: 100%;
            height: 22%;
            text-align: center;
            .button {
              display: block;
              width: 45%;
              margin: 0 auto;
              background-color: rgb(255, 247, 235);
              color: rgb(255, 151, 20);
            }
          }
        }
        .otherRight {
          margin-left: 25px;
          display: flex;
          flex-direction: column;
          justify-content: space-around; /* 水平居中 */
           button {
              font-size: 12px;
              height: 24px;
              width: 82px;
            }
          .info:hover {
            background-color: pink;
          }
          .more {
            margin-top: 10px;
           
          }
        }
      }
  }

.allBottomleft {
  width: 20%;
  display: flex;
  justify-content: space-between;
  margin: 30px 40px;
}
.bottom-pagination {
  position: fixed;
  bottom: 0px;
  width: calc(100% - 178px);
  background: #fff;
  right: 0;
  box-shadow: 0px -2px 2px 0px rgba(39, 36, 36, 0.02);
  padding-right: 30px;
  .totals {
    font-size: 16px;
    font-weight: bold;
  }
}
.bottom-pagination > .paginationBefore {
  float: left;
  line-height: 70px;
}
.buttomImg {
  margin-left: 20px;
}
</style>